import React, {useState} from 'react'

export default function CountFn() {
    // let count = 0 // 这样写的count是野生变量 值的修改不会引起页面的更新
    let [count, setCount] = useState(0) // state变量
    // 赋值语句从右向左执行 先调用useState这个函数
    // 调用时要传参 参数有且只有一个 就是变量的默认值 就会得到函数的默认值
    // 等号左边通过一个数组来接受右边的值 数组一共两项 第一个是state变量（修改变量页面会更新）
    // 等号左边的第二项 是一个用来修改第一项的函数 调用这个函数不仅会修改数据还能更新页面
    // setFood这个函数类似类组件中的setState
    let [food, setFood] = useState('rice')
    let [list, setList] = useState(['唱', '跳', 'rap'])
    // 新写一个自己的函数，用来处理对象数组等复杂情况
    let addHobby = () => {
        let arr = [...list];
        arr.push('打篮球');
        // 前面先把数据准备好
        setList(arr) // 这里直接传入最新数据即可
    }
  return (
    <div>
        <p>点击按钮，计数器的值就会增加</p>
        <button onClick={() => setCount(count+1)}>{count}</button>
        <p>午饭-{food}</p>
        <button onClick={() => setFood('hotpot')}>吃火锅</button>
        <button onClick={() => addHobby()}>打篮球</button>
        <hr></hr>
        {
            list.map((item, index) => {
                return (
                    <button key={index}>{item}</button>
                )
            })
        }
    </div>
  )
}
